<template>
    <div class="modeSelect">
        <!-- 退出 -->
        <img class="exitBtn" @click="clickExitBtn" src="../assets/img/exitBtnTwo.png" alt="">
        <!-- 标题 -->
        <heads :types="6" class="headss"></heads>
        <div class="conlist">
            <!-- 上传方式 -->
            <div class="imgBox">
                <img src="../assets/img/paySuccess.png" alt="">
            </div>
            <div class="tips FONT">请选择照片上传方式</div>
            <div class="photosBtns">
                <div class="btnBox FONT leftBtn" @click="retakePhoto">
                    <div>手机上传</div>
                </div>
                <div class="btnBox FONT leftBtn rightBtn" @click="photosSubmit">
                    <div>设备拍照</div>
                </div>
            </div>
        </div>
        <!-- 退出确认弹框 -->
        <exitConfirmation :isShow.sync="exitShow" @confirm="confirm"></exitConfirmation>
    </div>
</template>

<script>
import heads from '../components/heads.vue'
import exitConfirmation from '../components/exitConfirmation.vue'
export default {
    components:{
        heads,
        exitConfirmation,
    },
    data(){
        return {
            // 退出弹框
            exitShow:false,
            // 任务id
            taskId:'',
        }
    },
    methods:{
        // 点击退出
        clickExitBtn(){
            this.exitShow = true;
        },
        // 点击退出确认
        confirm(){
            // 跳转首页
            this.$router.push('/theme')
        },
        retakePhoto(){
            this.$router.push('/uploadPhotos?taskId='+this.taskId)
        },
        photosSubmit(){
            this.$router.push('/photograph?taskId='+this.taskId)
        },
    },
    created(){
        this.taskId = this.$route.query.taskId;
    }
}
</script>

<style lang="less" scoped>
.modeSelect{
    width: 100%;
    height: 1920px;
    background-image: url('../assets/img/bgImg.png');
    background-size: 100% 1920px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .headss{
        flex: none;
    }
    .exitBtn{
        width: 94px;
        height: 94px;
        position: fixed;
        left: 52px;
        top: 46px;
    }
    .conlist{
        flex: 1;
        padding: 0  50px  120px 50px;
        box-sizing: border-box;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        margin-top: 24px;
        transform:translateX(0px) scale(1);
        .imgBox{
            width: 758px;
            height: 665px;
            margin: 0 auto;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .tips{
            font-size: 48px;
            text-align: center;
            margin-top: 28px;
        }
        .photosBtns{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 52px;
            .leftBtn{
                margin-right: 86px;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0;
            }
            .rightBtn{
                box-sizing: border-box;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0;
                margin-left: 88px;
            }
            .bths{
                width: 308px;
                height: 94px;
                font-size: 32px;
                text-align: center;
                line-height: 94px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 64px;
                cursor: pointer;
                color: #fff;
                background-color: #7875FC;
                border-radius: 64px;
                box-shadow: 0px 0px 10px 0px #03008A33;
            }
            .btnOne{
                width: 230px;
                height: 106px;
            }
        }
        .btnBox{
            width: 250px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            margin: 0 auto;
            margin-top: 34px;
            cursor: pointer;
            font-size: 32px;
            position: relative;
            &::before{
                content:'';
                display: block;
                background-image: url('../assets/img/commonBtn.png');
                background-size: 100% 80px;
                position: absolute;
                width: 240px;
                height: 80px;
                z-index: -1;
            }
        }
    }
}
</style>